<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图书管理系统</title>
    <!-- 引入bootstrap.css -->
    <link
      rel="stylesheet"
      href="../../lib/bootstrap/dist/css/bootstrap.min.css"
    />
    <!-- 公共 -->
    <link rel="stylesheet" href="../../css/base.css" />
    <link rel="stylesheet" href="./index.css">
  </head>

  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link" href="../main">首页</a>
            <a class="nav-link" href="../search">搜索</a>
            <a class="nav-link" href="../borrow">借阅</a>
            <a class="nav-link" href="../people">个人</a>
            <a class="nav-link" href="../detail">图书详情</a>
            <a class="nav-link" href="../login">退出</a>
          </div>
        </div>
      </div>
    </nav>

    <div class="big mt-5">
      <h2 style="font-size: 32px;">图书详情</h2>
      <div class="d-flex align-items-start" style="margin-top: 50px">
        <!-- <img src="../../assets/book1.jpg" alt="图书图片" class="book-image"> -->

        <!-- 使用一个外层<div>包裹来完成换行 -->
        <div class="w-50 form">
          <!-- 动态渲染 -->
        </div>
      </div>
    </div>
  </body>
  <script src="../../lib/axios/dist/axios.min.js"></script>
  <script src="../../utils/request.js"></script>
  <script>
    // 使用axios发送请求获取图书信息并渲染
    const renderUserInfo = async () => {
      let bookId = 1;
      // 如果存在从borrow获取的bookId
      if(localStorage.getItem("bookId")) {
        bookId = localStorage.getItem("bookId");
      }

      const res = await axios(`/book/library/${bookId}`);

      // console.log(res.data); // 检查返回的数据
      const user = res.data.data;

      if (!user) {
        // console.error("未能获取用户数据");
        return; // 提前返回
      }

      const form = document.querySelector(".form");
      form.innerHTML = `
        <div class="mb-3" style="display: flex; align-items: center;white-space: nowrap;">
            <label for="bookId" class="form-label" style="margin-right: 20px;">图书ID</label>
            <input type="text" class="form-control" id="bookId" value="${
              user.bookId || "N/A"
            }" readonly>
        </div>
        <div class="mb-3" style="display: flex; align-items: center;white-space: nowrap;">
            <label for="bookId" class="form-label" style="margin-right: 40px;">书名</label>
            <input type="text" class="form-control" id="bookId" value="${
              user.title || "N/A"
            }" readonly>
        </div>
        <div class="mb-3" style="display: flex; align-items: center;white-space: nowrap;">
            <label for="bookAuthor" class="form-label" style="margin-right: 40px;">作者</label>
            <input type="text" class="form-control" id="bookAuthor" value="${
              user.author || "N/A"
            }" readonly>
        </div>

        <div class="mb-3" style="display: flex; align-items: center;white-space: nowrap;">
            <label for="remainingQuantity" class="form-label" style="margin-right: 10px;">剩余数量</label>
            <input type="text" class="form-control" id="remainingQuantity" value=${
              user.remainingQuantity || "N/A"
            } readonly>
        </div>
    `;
      return bookId;
    };
    renderUserInfo();
    // console.log(renderUserInfo())
    // console.log(renderUserInfo().PromiseResult)

    // 创建一个新函数以获取 id
    const getId = async () => {
      const id = await renderUserInfo(); // 等待 renderUserInfo 完成
      // console.log(id); // 使用 id
      // id = id === '' ? 1 : id;
      // console.log(id)
      const res = await axios(
        `/book/library/details/${id}`
      );
      // console.log(22)
      // console.log(res.data.data)
      const comment = document.querySelector(".comment");
      
      comment.innerHTML =
        comment.innerHTML +
        `
        <div class="w-50 mb-3" style="display: flex; align-items: center;white-space: nowrap;">
            <label for="borrowStatus" class="form-label" style="margin-right: 40px;">简介</label>
            <input type="text" class="form-control" id="borrowStatus" value=${res.data.data.comments} readonly>
        </div>

        `;
    };

    // 另一个函数
    const getId1 = async () => {
      const id = await renderUserInfo(); // 等待 renderUserInfo 完成
      // console.log(id); // 使用 id
    };
    // 调用新函数
    getId();
    getId1();
  </script>
</html>
